import React, { memo, useEffect } from 'react'
import PropTypes from 'prop-types'
import { EntireListWrapper } from './style'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { fetchEntireDataAction } from '@/store/modules/entire'
import RoomItem from '@/components/room-item'
import { changeDetailInfoAction } from '@/store/modules/detail'
import { useNavigate } from 'react-router-dom'


const EntireList = memo(({size, type}) => {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  // store中更多界面当前页所有房源列表  全部数量 是否加载数据中
  const {entireList, totalCount, loading} = useSelector((state) => ({
    entireList: state.entire.entireList,
    totalCount: state.entire.totalCount,
    loading: state.entire.loading
  }), shallowEqual)
  // 初始化数据
  useEffect(() => {
    dispatch(fetchEntireDataAction({size}))
  }, [dispatch, size])
  // 点击某个卡片跳转到相关详情界面
  function navigateToDetail(e, room) {
      dispatch(changeDetailInfoAction(room))
      navigate('/detail')
  }
  return (
    <EntireListWrapper>
        <div className='entire-info'>{type}房源{totalCount}多处</div>
        <div className='entire-list'>
            {
                entireList?.map(room => (
                    <RoomItem 
                    key={room._id} 
                    room={room} 
                    width="20%"
                    clickEvent={navigateToDetail}
                    />
                ))
            }
        </div>
        { loading && <div className='cover'></div> }
    </EntireListWrapper>
  )
})
EntireList.propTypes = {
    size: PropTypes.number, // 当前每页多少数量房源
    type: PropTypes.string  // 当前为什么类型的更多房源数据
}

export default EntireList